<template>
  <div class="content-right-btn" :style="{ 'right': contentWidth }">
    <!-- 定位 -->
    <div class="content-item">
      <div class="tooltip" title="定位">
        <el-button type="primary" :icon="Location" size="small" @click="toggleLocationPanel" circle></el-button>
      </div>

      <div class="pointBox" v-if="locationPanelOpen">
        <div class="pointBox_head">
          <div class="pointBox_head_left">
            <img src="@/assets/images/wenjian.png" alt="" />
            <span>定位</span>
          </div>
          <img src="@/assets/images/guanbi.png" alt="" @click="toggleLocationPanel" />
        </div>
        <div class="pointBox_body">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="定位" name="location">
              <div class="padding-style">
                <div class="pointBox_inpBox">
                  <span>经度</span>
                  <div class="pointBox_inpBox_inp">
                    <el-input v-model="coordinates.longitude" placeholder="请输入经度" />
                  </div>
                </div>
                <div class="pointBox_inpBox">
                  <span>纬度</span>
                  <div class="pointBox_inpBox_inp">
                    <el-input v-model="coordinates.latitude" placeholder="请输入纬度" />
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div style="display: flex; align-items: center; justify-content: flex-end">
          <el-button class="el-button-primary btn-style" plain size="small" type="primary"
            @click="pickCoordinates">拾取</el-button>
          <el-button class="el-button-primary btn-style" type="primary" plain size="small"
            @click="goToLocation">定位</el-button>
          <el-button class="el-button-primary btn-style" plain size="small"
            @click="toggleLocationPanel">关闭</el-button>
        </div>
      </div>
      
      <div v-if="isPickingLocation" class="pointTips" :style="{ left: cursorPosition.x + 'px', top: cursorPosition.y + 'px' }">
        <div>点击设置位置</div>
        <div class="round"></div>
      </div>
    </div>
    
    <!-- 距离量算 -->
    <div class="content-item">
      <div class="tooltip" title="距离量算">
        <el-button type="primary" :icon="Notebook" size="small" @click="startMeasureDistance" circle></el-button>
      </div>
    </div>
    
    <!-- 面积量算 -->
    <div class="content-item">
      <div class="tooltip" title="面积量算">
        <el-button type="primary" :icon="DataAnalysis" size="small" @click="startMeasureArea" circle></el-button>
      </div>
    </div>
    
    <!-- 地图重置 -->
    <div class="content-item">
      <div class="tooltip" title="重置地图并清除所有测量">
        <el-button type="primary" :icon="RefreshRight" size="small" @click="resetMap" circle></el-button>
      </div>
    </div>
    
    <!-- 预警发送记录 -->
    <!-- <div class="content-item">
      <div class="tooltip" title="预警发送记录">
        <el-button type="primary" :icon="Calendar" size="small" @click="showAlertLogs" circle></el-button>
      </div>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onUnmounted, onMounted } from 'vue'
import {
  Location, Calendar, Delete, RefreshRight, DataAnalysis, Notebook
} from '@element-plus/icons-vue'
import type { Map as OlMap } from 'ol'
import { fromLonLat } from 'ol/proj'
import { MeasureUtils, addMeasureStyles } from '@/utils/measureUtils';
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import { Style, Fill, Stroke } from 'ol/style.js';
import { Feature } from 'ol';
import * as olGeom from 'ol/geom.js';
import mapUtils from '@/utils/mapUtils';
import emitter from '@/utils/bus';
import {
  envList
} from "@/api/map/map.js";
import { Place } from "@/utils/request.js";

// 定义Props类型
interface Props {
  isPopup: boolean
  map: OlMap | null
}

const props = defineProps<Props>()

// 定义事件
const emit = defineEmits<{
  (e: 'fun', value: number): void
  (e: 'clearMeasurements'): void
  (e: 'resetMap'): void
  (e: 'disposeLogShow'): void
}>()

// 状态变量
const contentWidth = ref('0')
const locationPanelOpen = ref(false)
const activeTab = ref('location')
const isPickingLocation = ref(false)
const coordinates = reactive({
  longitude: '',
  latitude: ''
})
const cursorPosition = reactive({
  x: 0,
  y: 0
})
const isMeasuring = ref(false)

// 存储事件监听器
let mouseMoveListener: any = null
let mapClickListener: any = null

// 在代码中适当位置（可能是setup或者onMounted钩子内）添加如下代码
let measureUtils: MeasureUtils | null = null;
let measureCleanupFn: (() => void) | null = null;

// 添加环境相关的状态变量
const earlyMakers = ref<any[]>([]);
const envs = ref<any[]>([]);
const place = ref<number>(Place);

// 监听props.isPopup变化
watch(() => props.isPopup, (val) => {
  if (document.getElementById('contentWidth')) {
    contentWidth.value = window.getComputedStyle(document.getElementById('contentWidth')).width
  } else {
    contentWidth.value = '0'
  }
})

// 显示预警发送记录
const showAlertLogs = () => {
  emit('disposeLogShow')
}

// 打开/关闭定位面板
const toggleLocationPanel = () => {
  locationPanelOpen.value = !locationPanelOpen.value
  if (!locationPanelOpen.value) {
    // 如果面板关闭，确保停止拾取
    stopPickingCoordinates()
  }
}

// 拾取坐标
const pickCoordinates = () => {
  if (!props.map) {
    console.error('地图未初始化')
    return
  }
  
  // 如果已经在拾取，则停止拾取
  if (isPickingLocation.value) {
    stopPickingCoordinates()
    return
  }
  
  isPickingLocation.value = true
  
  // 先确保之前的监听器被清理
  if (mouseMoveListener) {
    document.removeEventListener('mousemove', mouseMoveListener)
  }
  
  if (mapClickListener && props.map) {
    props.map.un('click', mapClickListener)
  }
  
  // 重新创建鼠标移动监听，更新光标提示位置
  mouseMoveListener = (e: MouseEvent) => {
    cursorPosition.x = e.clientX - 50
    cursorPosition.y = e.clientY - 50
  }
  
  document.addEventListener('mousemove', mouseMoveListener)
  
  // 重新创建地图点击监听
  mapClickListener = (e: any) => {
    try {
      if (!props.map || !isPickingLocation.value) return
      
      // 尝试获取点击坐标 - 简化版本，只获取mapCoordinate
      const pixel = props.map.getEventPixel(e.originalEvent)
      const mapCoordinate = props.map.getCoordinateFromPixel(pixel)
      
      if (!mapCoordinate || mapCoordinate.length < 2) {
        console.error('获取坐标失败')
        return
      }
      
      // 设置坐标值
      coordinates.longitude = mapCoordinate[0].toFixed(6)
      coordinates.latitude = mapCoordinate[1].toFixed(6)
      
      // 停止拾取
      stopPickingCoordinates()
    } catch (error) {
      console.error('拾取坐标失败:', error)
      stopPickingCoordinates()
    }
  }
  
  // 添加地图点击监听
  props.map.on('click', mapClickListener)
}

// 停止拾取坐标
const stopPickingCoordinates = () => {
  isPickingLocation.value = false
  
  // 移除鼠标移动监听
  if (mouseMoveListener) {
    document.removeEventListener('mousemove', mouseMoveListener)
    mouseMoveListener = null
  }
  
  // 移除地图点击监听
  if (mapClickListener && props.map) {
    props.map.un('click', mapClickListener)
    mapClickListener = null
  }
}

// 前往定位点
const goToLocation = () => {
  if (!props.map) {
    console.error('地图未初始化')
    return
  }
  
  if (!coordinates.longitude || !coordinates.latitude) {
    console.error('请输入有效的坐标')
    return
  }
  
  try {
    const lon = parseFloat(coordinates.longitude)
    const lat = parseFloat(coordinates.latitude)
    
    if (isNaN(lon) || isNaN(lat)) {
      console.error('坐标格式不正确')
      return
    }
    
    // 创建坐标对象
    const position = fromLonLat([lon, lat], props.map.getView().getProjection())
    
    // 设置地图中心并缩放
    props.map.getView().animate({
      center: position,
      zoom: 12,
      duration: 500
    })
  } catch (error) {
    console.error('定位失败:', error)
  }
}

// 开始距离测量
const startMeasureDistance = () => {
  isMeasuring.value = true
  emit('fun', 1) // 1 代表距离测量
}

// 开始面积测量
const startMeasureArea = () => {
  isMeasuring.value = true
  emit('fun', 2) // 2 代表面积测量
}

// 清除测量
const clearMeasurements = () => {
  isMeasuring.value = false
  emit('clearMeasurements')
}

// 重置地图
const resetMap = () => {
  console.log('重置地图 - 发送重置事件');
  //   // 先重置本地测量状态
  //   isMeasuring.value = false;
  // // 清除测量
  // clearMeasurements();
  // // 停止位置拾取（如果正在进行）
  // stopPickingCoordinates();
  // // 发送重置事件
  // emit('resetMap');
  
  // 显示加载状态
  const loading = ElLoading.service({
    lock: true,
    text: '正在重置地图...',
    background: 'rgba(0, 0, 0, 0.7)'
  });
  
  try {
    // 先重置本地测量状态
    isMeasuring.value = false;
    
    // 清除测量
    clearMeasurements();
    
    // 停止位置拾取（如果正在进行）
    stopPickingCoordinates();
    
    // 强制清除地图上所有图形元素
    const mapInstance = props.map;
    if (mapInstance) {
      // 1. 清除所有矢量图层中的要素
      const layers = mapInstance.getLayers().getArray();
      layers.forEach(layer => {
        // 检查是否是矢量图层
        if (layer instanceof VectorLayer) {
          const source = layer.getSource();
          if (source && typeof source.clear === 'function') {
            source.clear();
          }
        }
      });
      
      // 2. 清除所有使用天地图API添加的覆盖物
      if (window.T) {
        try {
          // 清除天地图上的覆盖物
          const tmap = (window as any).T?.map;
          if (tmap && typeof tmap.clear === 'function') {
            tmap.clear();
          }
          
          // 清除特定类型的覆盖物
          const overlayTypes = ['Marker', 'Label', 'InfoWindow', 'Circle', 'Polyline', 'Polygon'];
          overlayTypes.forEach(type => {
            const apiClass = (window as any).T[type];
            if (apiClass && typeof apiClass.getOverlays === 'function') {
              const overlays = apiClass.getOverlays();
              if (Array.isArray(overlays)) {
                overlays.forEach(overlay => {
                  if (overlay && typeof overlay.remove === 'function') {
                    overlay.remove();
                  }
                });
              }
            }
          });
        } catch (error) {
          console.warn('清除天地图覆盖物时出错:', error);
        }
      }
      
      // 3. 移除所有OpenLayers覆盖物
      const olOverlays = mapInstance.getOverlays().getArray().slice();
      olOverlays.forEach(overlay => {
        mapInstance.removeOverlay(overlay);
      });
      
      // 4. 重置地图视图到初始位置
      // mapInstance.getView().animate({
      //   center: [121.9, 30.5], // 地图初始中心点
      //   zoom: 10.5,           // 地图初始缩放级别
      //   duration: 800
      // });
    }
    
    // 清除可能存在的早期标记
    if (earlyMakers.value.length > 0) {
      earlyMakers.value.forEach((ele) => {
        try {
          if (ele instanceof Feature) {
            // 如果是OpenLayers Feature
            const source = mapUtils.getVectorSource();
            if (source) {
              source.removeFeature(ele);
            }
          } else if (props.map) {
            // 任何其他类型的覆盖物，统一使用removeOverlay方法
            try {
              props.map.removeOverlay(ele);
            } catch (e) {
              // 如果removeOverlay方法不存在或失败，尝试使用备用方法
              try {
                (props.map as any).removeOverLay?.(ele);
              } catch (innerError) {
                console.error('备用移除方法也失败:', innerError);
              }
            }
          }
        } catch (error) {
          console.error('移除图形失败:', error);
        }
      });
      earlyMakers.value = [];
    }
    
    // 发送重置事件
    emit('resetMap');
    
    // 从left-content.vue复制而来：获取全部通航环境列表进行绘制
    getwholeEnv();
    
    // 延迟关闭加载状态
    setTimeout(() => {
      loading.close();
      // 显示成功提示
      ElMessage.success('地图已重置');
    }, 800);
    
  } catch (error) {
    console.error('重置地图时发生错误:', error);
    loading.close();
    ElMessage.error('重置地图失败，请刷新页面重试');
  }
};

// 获取全部通航环境列表
const getwholeEnv = () => {
  envList({
    place: place.value,
  }).then((res: any) => {
    if (res.code == 200) {
      envs.value = res.rows;
      setEarlyWarning(envs.value);
    }
  }).catch(error => {
    console.error("获取全部环境列表失败:", error);
  });
};

// 绘制通航环境
const setEarlyWarning = (warning: any[]) => {
  if (!props.map) {
    console.error("地图实例未加载，无法绘制环境");
    return;
  }
  
  if (!warning || warning.length === 0) {
    console.warn("没有可绘制的环境数据");
    return;
  }
  
  // 清除已有的环境围栏
  if (earlyMakers.value.length > 0) {
    earlyMakers.value.forEach((ele) => {
      try {
        if (ele instanceof Feature) {
          // 如果是OpenLayers Feature
          const source = mapUtils.getVectorSource();
          if (source) {
            source.removeFeature(ele);
          }
        } else if (props.map) {
          // 任何其他类型的覆盖物，统一使用removeOverlay方法
          try {
            props.map.removeOverlay(ele);
          } catch (e) {
            // 如果removeOverlay方法不存在或失败，尝试使用备用方法
            try {
              (props.map as any).removeOverLay?.(ele);
            } catch (innerError) {
              console.error('备用移除方法也失败:', innerError);
            }
          }
        }
      } catch (error) {
        console.error('移除早期标记失败:', error);
      }
    });
    earlyMakers.value = [];
  }
  
  const T = window.T;
  
  // 如果T不存在，则使用OpenLayers绘制
  if (!T) {
    try {
      for (let i = 0; i < warning.length; i++) {
        if (warning[i].display && warning[i].regions) {
          try {
            const points = JSON.parse(warning[i].regions);
            
            for (let j = 0; j < points.length; j++) {
              const coordinates = points[j].map((p: any) => [p.lng, p.lat]);
              
              // 创建多边形样式
              const polygonStyle = new Style({
                fill: new Fill({
                  color: ensureColorWithOpacity(warning[i].fillColor)
                }),
                stroke: new Stroke({
                  color: ensureColorWithOpacity(warning[i].borderColor),
                  width: warning[i].borderWidth || 2,
                  lineDash: warning[i].borderType === 1 ? undefined : [5, 5]
                })
              });
              
              // 创建多边形要素
              const polygonFeature = new Feature({
                geometry: new olGeom.Polygon([coordinates])
              });
              polygonFeature.setStyle(polygonStyle);
              
              // 将当前项的数据存储在要素的属性中
              polygonFeature.set('envData', {
                title: warning[i].name,
                type: warning[i].envType ? warning[i].envType : '',
                remark: warning[i].remark
              });
              
              // 添加到图层
              mapUtils.addFeature(polygonFeature);
              earlyMakers.value.push(polygonFeature);
            }
          } catch (error) {
            console.error("解析区域数据失败", error);
          }
        } else if (warning[i].regions2) {
          try {
            const points = JSON.parse(warning[i].regions2);
            
            for (let j = 0; j < points.length; j++) {
              const coordinates = points[j].map((p: any) => [p.lng, p.lat]);
              
              // 创建线条样式
              const lineStyle = new Style({
                stroke: new Stroke({
                  color: ensureColorWithOpacity(warning[i].borderColor),
                  width: warning[i].borderWidth || 2,
                  lineDash: warning[i].borderType === 1 ? undefined : [5, 5]
                })
              });
              
              // 创建线条要素
              const lineFeature = new Feature({
                geometry: new olGeom.LineString(coordinates)
              });
              lineFeature.setStyle(lineStyle);
              
              // 将当前项的数据存储在要素的属性中
              lineFeature.set('envData', {
                title: warning[i].name,
                type: warning[i].envType ? warning[i].envType : '',
                remark: warning[i].remark
              });
              
              // 添加到图层
              mapUtils.addFeature(lineFeature);
              earlyMakers.value.push(lineFeature);
            }
          } catch (error) {
            console.error("解析regions2数据失败", error);
          }
        }
      }
      
      // 为地图添加鼠标悬停事件
      if (props.map && typeof props.map.on === 'function') {
        // 移除之前的事件监听器
        props.map.un('pointermove', handleMapPointerMove);
        // 添加新的事件监听器
        props.map.on('pointermove', handleMapPointerMove);
      }
    } catch (error) {
      console.error("使用OpenLayers绘制环境失败:", error);
    }
    return;
  }
  
  // 天地图绘制方式
  for (let i = 0; i < warning.length; i++) {
    if (warning[i].display) {
      try {
        const points = JSON.parse(warning[i].regions);
        const currentItemData = warning[i]; // 保存当前条目数据，避免闭包问题
        
        for (let j = 0; j < points.length; j++) {
          const polygon = new T.Polygon(points, {
            color: ensureColorWithOpacity(currentItemData.borderColor),
            weight: currentItemData.borderWidth,
            fillColor: ensureColorWithOpacity(currentItemData.fillColor),
          });
          
          // 使用try-catch处理可能不兼容的方法
          try {
            props.map.addOverlay(polygon);
          } catch (e) {
            // 如果addOverlay不可用，尝试使用备用方法
            try {
              (props.map as any).addOverLay?.(polygon);
            } catch (innerError) {
              console.error('备用添加方法也失败:', innerError);
            }
          }
          
          earlyMakers.value.push(polygon);
          
          // 鼠标悬停事件 - 使用全局InfoWindow
          polygon.addEventListener("mouseover", (e: any) => {
            emitter.emit('show-info-window', {
              title: currentItemData.name,
              type: currentItemData.envType ? currentItemData.envType : '',
              remark: currentItemData.remark,
              x: e.containerPoint.x,
              y: e.containerPoint.y - 10, // 稍微上移避免鼠标遮挡
              autoClose: false
            });
          });
          
          // 鼠标移出事件
          polygon.addEventListener("mouseout", () => {
            emitter.emit('hide-info-window');
          });
        }
      } catch (error) {
        console.error("解析区域数据失败", error);
      }
    } else if (warning[i].regions2) {
      try {
        const points = JSON.parse(warning[i].regions2);
        const currentItemData = warning[i]; // 保存当前条目数据，避免闭包问题
        
        for (let j = 0; j < points.length; j++) {
          const polyline = new T.Polyline(points[j], {
            color: "blue",
            weight: currentItemData.borderWidth,
          });
          
          // 使用try-catch处理可能不兼容的方法
          try {
            props.map.addOverlay(polyline);
          } catch (e) {
            // 如果addOverlay不可用，尝试使用备用方法
            try {
              (props.map as any).addOverLay?.(polyline);
            } catch (innerError) {
              console.error('备用添加方法也失败:', innerError);
            }
          }
          
          earlyMakers.value.push(polyline);
          
          // 鼠标悬停事件 - 使用全局InfoWindow
          polyline.addEventListener("mouseover", (e: any) => {
            emitter.emit('show-info-window', {
              title: currentItemData.name,
              type: currentItemData.envType ? currentItemData.envType : '',
              remark: currentItemData.remark,
              x: e.containerPoint.x,
              y: e.containerPoint.y - 10, // 稍微上移避免鼠标遮挡
              autoClose: false
            });
          });
          
          // 鼠标移出事件 - 修复mouseout事件绑定方式
          polyline.addEventListener("mouseout", () => {
            emitter.emit('hide-info-window');
          });
        }
      } catch (error) {
        console.error("解析regions2数据失败", error);
      }
    }
  }
};

// OpenLayers鼠标悬停处理函数
const handleMapPointerMove = (e: any) => {
  if (!props.map) return;
  
  // 检查当前指针位置是否有Feature
  const feature = props.map.forEachFeatureAtPixel?.(e.pixel, (feature: any) => feature);
  
  if (feature) {
    // 获取Feature上存储的环境数据
    const envData = feature.get('envData');
    if (envData) {
      // 使用事件总线显示信息窗口
      emitter.emit('show-info-window', {
        ...envData,
        x: e.originalEvent.clientX,
        y: e.originalEvent.clientY - 10, // 稍微上移避免鼠标遮挡
        autoClose: false
      });
    }
  } else {
    // 隐藏信息窗口
    emitter.emit('hide-info-window');
  }
};

/**
 * 颜色工具函数 - 确保填充颜色有50%的透明度
 * @param color 输入的颜色 (hex, rgb, rgba)
 * @returns 带50%透明度的rgba颜色
 */
function ensureColorWithOpacity(color: string | null): string {
  if (!color) return 'rgba(64, 158, 255, 0.5)'; // 默认蓝色，50%透明
  
  // 已经是rgba格式，修改透明度为0.5
  if (color.startsWith('rgba')) {
    // 提取 rgba 中的 r, g, b 值
    const match = color.match(/rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*[\d.]+\s*\)/);
    if (match) {
      const [, r, g, b] = match;
      return `rgba(${r}, ${g}, ${b}, 0.5)`;
    }
  }
  
  // rgb格式转rgba
  if (color.startsWith('rgb(')) {
    // 提取 rgb 中的 r, g, b 值
    const match = color.match(/rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/);
    if (match) {
      const [, r, g, b] = match;
      return `rgba(${r}, ${g}, ${b}, 0.5)`;
    }
  }
  
  // 十六进制格式转rgba
  if (color.startsWith('#')) {
    let r = 0, g = 0, b = 0;
    // #RGB 格式
    if (color.length === 4) {
      r = parseInt(color[1] + color[1], 16);
      g = parseInt(color[2] + color[2], 16);
      b = parseInt(color[3] + color[3], 16);
    } 
    // #RRGGBB 格式
    else if (color.length === 7) {
      r = parseInt(color.substring(1, 3), 16);
      g = parseInt(color.substring(3, 5), 16);
      b = parseInt(color.substring(5, 7), 16);
    }
    return `rgba(${r}, ${g}, ${b}, 0.5)`;
  }
  
  // 其他情况，返回默认颜色
  return 'rgba(64, 158, 255, 0.5)';
}

// 在组件挂载时初始化数据
onMounted(() => {
  place.value = Place;
  
  // 如果地图已加载，获取全部通航环境列表
  if (props.map) {
    getwholeEnv();
  }
})

// 监听地图实例变化
watch(() => props.map, (newMap) => {
  // 当地图实例加载完成后，获取环境数据
  if (newMap) {
    getwholeEnv();
  }
})

// 组件卸载时清理事件监听
onUnmounted(() => {
  stopPickingCoordinates()
})
</script>

<style scoped>
.btn-style {
  width: 80px !important;
}

.padding-style {
  padding: 5px;
}

/* 更改tabs切换标签下的蓝色下划线 */
:deep(.el-tabs__active-bar) {
  background-color: #5fd3fc !important;
}

/* 改变 element的el-tabs默认选中项 文字颜色 */
:deep(.el-tabs__item.is-active) {
  color: #5fd3fc !important;
}

:deep(.el-tabs .el-tabs__nav-scroll) {
  width: 300px !important;
  background-color: transparent !important;
  color: #ffffff;
}

:deep(.el-button--primary:hover),
:deep(.el-button--primary:focus) {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background: rgb(103, 113, 183) !important;
  border: 0;
  box-shadow: 0 0 3px gray;
}

:deep(.el-button--primary) {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background: rgb(60, 65, 103) !important;
  border: 0;
  box-shadow: 0 0 3px gray;
}

:deep(.el-checkbox) {
  color: #ffffff;
}

.content-right-btn {
  position: absolute;
  right: 20px;
  top: 100px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content-item {
  margin: 5px 20px;
  position: relative;
}

.pointBox {
  position: absolute;
  padding: 10px;
  width: 298px;
  background: rgba(60, 65, 103, 0.95);
  color: white;
  box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  top: 0px;
  left: -300px;
  z-index: 1000;
}

.pointBox_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.pointBox_head img {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.pointBox_head_left {
  display: flex;
  align-items: center;
  color: #ffffff;
}

.pointBox_head_left>img {
  margin-right: 10px;
}

.pointBox_inpBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #ffffff;
  margin-bottom: 14px;
}

.pointBox_inpBox>span {
  flex-shrink: 0;
}

.pointBox_inpBox_inp {
  width: 180px;
  height: 30px;
  margin-left: 20px;
  margin-right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  flex-shrink: 0;
}

.pointTips {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #00ff00;
  font-size: 14px;
  position: fixed;
  z-index: 1500;
  pointer-events: none; /* 防止干扰地图点击 */
  background: rgba(0, 0, 0, 0.6);
  padding: 5px 10px;
  border-radius: 4px;
}

.round {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #0099ff;
  border: 2px solid #ffffff;
  margin-top: 5px;
}

.tooltip-width {
  padding: 2px;
}
</style>



